<template>
	<view class="charts">
		<view class="legend">
			<view class="items" v-if="projectType !=1">
				<view class="item">
					<view class="icon"></view>
					<text>已完成</text>
				</view>
				<view class="item item__total">
					<view class="icon"></view>
					<text>总数</text>
				</view>
				<view class="item item__total">
					<view class="icon"></view>
					<text>进度</text>
				</view>
			</view>
			
			<view class="items" v-if="projectType ==1">
				<view class="item">
					<text>完成进度</text>
				</view>
			</view>
			
			
			
			<view class="percent" v-if="projectType !=1">
				<div class="number" v-for="item in list" :key="item.name">
					<text v-if="item.name == '架线'">{{item.done}}<span style="font-size: 14rpx;">Km</span></text>
					<text v-else>{{item.done}}<span style="font-size: 18rpx;">基</span></text>
					<text v-if="item.name == '架线'">{{item.total}}<span style="font-size: 14rpx;">Km</span></text>
					<text v-else>{{item.total}}<span style="font-size: 18rpx;">基</span></text>
					<text>{{item.fee == 'NaN%'? '0.00%':item.fee}}</text>
				</div>
			</view>
			<view class="percent" v-if="projectType ==1">
				<div class="number" v-for="item in list" :key="item.name">
					<!-- <text v-if="item.name !== '架线'">{{Math.ceil(item.done / item.total * 100)}}%</text>
					<text v-else>{{item.total}}</text> -->
					<!-- <text>{{Math.ceil(item.done / item.total * 100) == 'NaN%'? '0.00%': Math.ceil(item.done / item.total * 100)}}%</text> -->
					<text>{{item.totals == 'NaN%'? '0.00%':item.totals}}%</text>
				</div>
			</view>
		</view>
		<view class="series">
			<view class="item" v-for="item in list" :key="item.name">
				<view class="label">{{item.name}}：
				</view>
				<view class="bar">
					<view class="done" :style="{width: `${Math.round(item.done / item.total * 100)}%`}">
					</view>
					<view class="ing" :style="{width: `${Math.round(item.ing / item.total * 100)}%`}">
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			info: {
				type: Object,
				default() {
					return {}
				}
			},
			projectType: {
				type: [String, Number],
				default: "2"
			}
		},
		watch: {
			info: {
				handler(nv) {
					this.setData(nv);
				},
				deep: true,
			}
		},
		mounted() {
			if (this.projectType == '1') {
				this.list = [
					{
						id: 1,
						name: '土建',
						done: 0,
						total: 0,
						totals:0
					},
					{
						id: 2,
						name: '电气',
						done: 0,
						total: 0,
						totals:0
					},
				];
			}	
			this.setData(this.info);
		},
		methods: {
			setData(nv) {
				if (Object.keys(nv).length > 0 && this.projectType != '1') {
					this.list[0].done = nv.base_finish;
					this.list[0].total = nv.total;
					this.list[0].fee = (nv.base_finish/nv.total*100).toFixed(0)+'%';
					
					
					this.list[1].done = nv.tower_finish;
					this.list[1].total = nv.total;
					this.list[1].fee = (nv.tower_finish/nv.total*100).toFixed(0)+'%';
					
					
					let line_total= Number(nv.line_total);
					this.list[2].done = nv.line_finish;
					this.list[2].total = nv.line_total;
					this.list[2].fee = (nv.line_finish/line_total*100).toFixed(0)+'%';
				}
				if (Object.keys(nv).length > 0 && this.projectType == '1') {
					this.list[0].done = nv.tj_finish;
					this.list[0].total = nv.tj_total;
					this.list[0].totals = (nv.tj_finish/nv.tj_total*100).toFixed(0)
					
					
					this.list[1].done = nv.dq_finish;
					this.list[1].total = nv.dq_total;
					this.list[1].totals = (nv.dq_finish/nv.dq_total*100).toFixed(0)
				}
				
			}
		},
		data() {
			return {
				list: [
					{
						id: 1,
						name: '基础',
						done: 0,
						total: 1
					},
					{
						id: 2,
						name: '立塔',
						done: 0,
						total: 1
					},
					{
						id: 3,
						name: '架线',
						done: 0,
						total: 1
					},
					// {
					// 	id: 4,
					// 	name: '架线长度',
					// 	ing: 0,
					// 	done: 0,
					// 	total: 1
					// },
				],
			}
		}
	}
</script>

<style lang="scss">
	.charts {
		width: 100%;
		padding-top: 30rpx;
		@include clear();
		.legend {
			width: 200rpx;
			float: right;	
			.items{
				width: 100%;
				height: 40rpx;
				display: flex;
				line-height: 40rpx;
				justify-content: space-between;
				
			}
			.item {
				height: 40rpx;
				margin-left: -20rpx;
				// display: inline-block;
				.icon {
					display: inline-block;
					border-radius: 50%;
					width: 15rpx;
					height: 15rpx;
					background-color: #2d5dfe;
					// margin-right: 7rpx;
				}
	
				text {
					font-size: 20rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 35rpx;
					letter-spacing: 0rpx;
					color: #d8d8d5;
				}
	
			}
	
			.item__ing {
				.icon {
					background-color: #00cdb4;
				}
	
				text {
					margin-right: 0;
				}
			}
			.item__total{
				.icon {
					background-color: orange;
				}
			}
	
			.percent {
				width: 100%;
				box-sizing: border-box;
				
				.number {
					width: 100%;
					font-size: 25rpx;
					height: 20rpx;
					line-height: 20rpx;
					margin-top: 13rpx;
					color: #3b3c40;
					display: flex;
					text-align: center;
					justify-content: space-between;
				}
			}
		}
	
		.series {
			width: calc(100% - 200rpx);
			float: left;
			padding-top: 40rpx;
			.item {
				width: 100%;
				height: 20rpx;
				line-height: 20rpx;
				@include clear();
	
				.label {
					float: left;
					width: 90rpx;
					line-height: 20rpx;
					font-size: 25rpx;
					// font-size: 10px;
					margin-top: 9rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #3b3c40;
				}
	
				.bar {
					float: left;
					width: calc(90% - 100rpx);
					// height: 14rpx;
					height: 12px;
					margin-top: 10rpx;
					background-color: #d8d8d5;
					border-radius: 7rpx;
					position: relative;
					overflow: hidden;
	
					.done {
						height: 100%;
						float: left;
						background-color: #2d5dfe;
					}
	
					.ing {
						height: 100%;
						float: left;
						background-color: #00cdb4;
					}
				}
			}
		}
	}
</style>
